/**
 * 
 * 发布会议页面
 * 
 * */

import React, { useMemo, useCallback, useState } from 'react';
import Header from '@/component/layout/Header/Header';
import './style.less';
import { List, InputItem, PickerView, Button, Toast, DatePicker } from 'antd-mobile';
import { postPubMetting } from '@/network/protocol';

const FormList = [
  // { url: require('../../assests/img/meetaddr.png'), label: '会议属性', value: '',key:'prop' },
  { url: require('../../assests/img/meetname.png'), label: '会议名称', value: '', key: 'name' },
  // { url: require('../../assests/img/meettime.png'), label: '会议时间', value: '', key: 'time' },
  { url: require('../../assests/img/meetaddr.png'), label: '会议地点', value: '', key: 'location' },
  // { url: require('../../assests/img/protab1-0.png'), label: '会议简介', value: '', key: 'intro' },
]

const Publish = (props) => {
  const [value, setValue] = useState('0');
  const [value1, setValue1] = useState(new Date());
  const [show, setShow] = useState(false);
  const [param, setParam] = useState({ meetingType: 0, name: '', time: Date.now(), location: '', introduce: '' });
  const ValueList = useMemo(() => {
    return [
      { label: '全国会', value: '0', },
      { label: '区域会', value: '1', },
      { label: '城市会', value: '2', },
    ];
  }, [])
  const keyMap = useMemo(() => {
    return {
      name: '会议名称',
      time: '会议时间',
      location: '会议地点',
      meetingType: '会议属性',
      introduce: '会议简介',
    }
  }, [])
  const getValue = useCallback(() => {
    let item = ValueList.find(item => item.value === value)
    return item.label
  }, [ValueList, value])

  const postValue = useCallback(async () => {

    let ar = Object.keys(param);
    for (let k of ar) {
      if (param[k] === '') {
        Toast.info(`请输入${keyMap[k]}`, 1);
        // break;
        return
      }
    }
    let res = await postPubMetting(param)
    if (res.errorCode === 0) {
      Toast.info('审核成功后才会显示到列表页！', 2);
      props.history.push('/academic')
    }

  }, [keyMap, param, props.history])

  const setVal = useCallback((e, type) => {
    let params = {
      ...param,
      [type]: e,
    }
    setParam(params)
  }, [param])

  const onChange = useCallback((value) => {
    setValue(value[0]);
    setShow(false);
    setVal(value[0], 'meetingType')
  }, [setVal])

  return <>
    <Header
      center={<span>学术动态</span>}
    />
    <div className="Publish-box global-content">
      <List className="Publish-box-list">
        {
          FormList.map((item, index) => {
            return <InputItem key={item.key} onChange={(e) => setVal(e, item.key)}>
              <img className={'img' + index} src={item.url} alt="" />
              <span>{item.label}：</span>
            </InputItem>
          })
        }
      </List>



      <div className="shuxing-box">
        <img src={require('../../assests/img/shuxing.png')} alt="" />
        <span>会议属性：</span>
        <div className="select-meeting" onClick={() => setShow(true)}>
          <span>{getValue()}</span>
          <img src={require('../../assests/img/down.png')} alt="" />
        </div>
      </div>

      <List className="Publish-box-list Publish-box-list2">
        <InputItem onChange={(e) => setVal(e, 'introduce')} >
          <img className={'img3'} src={require('../../assests/img/protab1-0.png')} alt="" />
          <span>{'会议简介'}：</span>
        </InputItem>
      </List>

      <List className="Publish-box-list Publish-box-list2  Publish-box-list3">
        <DatePicker
          className="bbbb"
          value={value1}
          // onChange={(e) => { console.log(e) }}
          onOk={date => {setVal(+date, 'time');setValue1(date)}}
          // onDismiss={date => { console.log(date) }}
        >
          <List.Item arrow="horizontal">
            <img className={'img3'} src={require('../../assests/img/meettime.png')} alt="" />
            <span className="img3span">{'会议时间'}：</span>
          </List.Item>
        </DatePicker>
      </List>

      {
        show && <PickerView
          onChange={onChange}
          value={[value]}
          data={ValueList}
          cascade={false}
        />
      }
      
      {
        show && <div className="PickerView-meng" onClick={() => setShow(false)}></div>
      }

      <div className="button-box">
        <Button type="primary" onClick={postValue}>提交</Button>
      </div>

    </div>
  </>
}


export default React.memo(Publish);